<!--
  ~ Copyright 2013-2019, Centre for Genomic Regulation (CRG)
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<html>

    <head>
        <title>Nextflow Cytoscape.js with Dagre</title>

        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

        <script type="text/javascript">
        var prot = (("https:" == document.location.protocol) ? "https://" : "http://");
        document.write(unescape("%3Cscript src='" + prot + "code.jquery.com/jquery-2.0.3.min.js' type='text/javascript' %3E%3C/script%3E"));
        document.write(unescape("%3Cscript src='" + prot + "cdnjs.cloudflare.com/ajax/libs/cytoscape/2.6.12/cytoscape.min.js' type='text/javascript' %3E%3C/script%3E"));
        document.write(unescape("%3Cscript src='" + prot + "cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js' type='text/javascript' %3E%3C/script%3E"));
        document.write(unescape("%3Cscript src='" + prot + "cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.2/cytoscape-dagre.js' type='text/javascript' %3E%3C/script%3E"));
        </script>

        <style>
            body {
                font-family: helvetica;
                font-size: 14px;
            }

            #cy {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 999;
            }

            h1 {
                opacity: 0.5;
                font-size: 1em;
            }
        </style>

        <script>
            $(function(){
                var cy = window.cy = cytoscape({
                    container: document.getElementById('cy'),
                    boxSelectionEnabled: false,
                    autounselectify: true,

                    layout: {
                        name: 'dagre'
                    },

                    style: cytoscape.stylesheet()
                        .selector( 'node')
                            .css({
                                'width': 10,
                                'height': 10,
                                'content': 'data(label)',
                                'text-valign': 'center',
                                'text-halign': 'center',
                                'text-opacity': 0.5,
                            })
                        .selector('node.PROCESS')
                            .css({
                                'width': 100,
                                'height': 50,
                                'text-opacity': 0.9,
                                'background-color': '#009911'
                            })
                        .selector('node.OPERATOR')
                            .css({
                                'background-color': '#11479e',
                                'text-halign': 'right',
                            })
                        .selector('node.ORIGIN')
                            .css({
                                'background-color': '#999999',
                                'text-halign': 'right',
                            })
                        .selector('node.TERMINATION')
                            .css({
                                'background-color': '#999999',
                                'text-halign': 'right',
                            })
                        .selector('edge')
                            .css({
                                'content': 'data(label)',
                                'text-opacity': 0.5,
                                'width': 4,
                                'target-arrow-shape': 'triangle',
                                'line-color': '#9dbaea',
                                'target-arrow-color': '#9dbaea'
                            }),

/* REPLACE_WITH_NETWORK_DATA */

                });

            });
        </script>
    </head>

    <body>
        <h1>Nextflow Cytoscape.js with Dagre</h1>
        <div id="cy"></div>
    </body>

</html>
